<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>JRBlog</title>
    <link rel="stylesheet" href="static/live2d/css/live2d.css" />
    <script src="static/js/TweenLite.min.js"></script>
		<script src="static/js/EasePack.min.js"></script>
    <script src="static/js/rAF.js"></script>
    <script type="text/javascript">
      const message_Path = 'static/live2d/'
      const home_Path = 'http://127.0.0.1:3000'
    </script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="static/live2d/js/live2d.js"></script>
    <script type="text/javascript" src="static/live2d/js/message.js"></script>
    <style>
      #spinner {
        width: 60px;
        height: 60px;
        position: relative;
        margin: 300px auto;
      }
      .double-bounce1, .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #67CF22;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;

        -webkit-animation: bounce 2.0s infinite ease-in-out;
        animation: bounce 2.0s infinite ease-in-out;
      }
      .double-bounce2 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
      }

      @-webkit-keyframes bounce {
        0%, 100% { -webkit-transform: scale(0.0) }
        50% { -webkit-transform: scale(1.0) }
      }

      @keyframes bounce {
        0%, 100% {
          transform: scale(0.0);
          -webkit-transform: scale(0.0);
        } 50% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
        }
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios@0.18.0/index.js"></script>
    <script src="static/mouseClick/mo.min.js"></script>
    <script src="static/mouseClick/mojs-player.min.js"></script>
    <script>
      // 配置鼠标水波点击效果
      let _extends = Object.assign || function (target) { for (let i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(2)){break;} let source = arguments[i]; for (let key in source) {if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } }
      window.CP.exitedLoop(1);
      }
      window.CP.exitedLoop(2);
      return target; };

      let OPTS = {
          fill: 'none',
          radius: 25,
          strokeWidth: { 50: 0 },
          scale: { 0: 1 },
          angle: { 'rand(-35, -70)': 0 },
          duration: 500,
          left: 0,
          top: 0,
          easing: 'cubic.out'
      };

      let circle1 = new mojs.Shape(_extends({}, OPTS, {
          stroke: '#FF8966'
      }));

      let circle2 = new mojs.Shape(_extends({}, OPTS, {
          radius: { 0: 15 },
          strokeWidth: { 30: 0 },
          stroke: '#E5446D',
          delay: 'rand(75, 150)'
      }));

      document.addEventListener('click', function (e) {
          circle1.tune({ x: e.pageX, y: e.pageY }).replay();

          circle2.tune({ x: e.pageX, y: e.pageY }).replay();
      });
    </script>
    <div id="spinner">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
    <div id="app"></div>
  </body>
</html>
